import React, { useEffect, useState } from 'react'
import { useNavigate } from 'react-router-dom'
import { Swiper, Image, Cell, Button } from 'react-vant';
import { Cascader, Calendar, Popup, Space, Toast } from 'antd-mobile'
import { options } from '../../api/data'
import img from '../../img/切换.png'
type Props = {}
function My({ }: Props) {
  const [visible, setVisible] = useState(false) // 第一个 城市
  const [visibleB, setVisibleB] = useState(false)// 第二个 城市
  const [visible5, setVisible5] = useState(false) //  日期选择器
  const [value, setValue] = useState<string[]>(["北京"])
  const [valueB, setValueB] = useState<string[]>(["上海"])
  const [time, setTime] = useState(`${new Date().getMonth() + 1}月${new Date().getDate()}日`)
  window.addEventListener("scroll", () => {
    console.log("11111111111")
  })
  let submit = async () => {
    let tokend: any = localStorage.getItem('token')
    console.log(tokend);
    if (tokend == 200) {
      console.log("已登录")

    } else {
      alert("未登录")
    }
  }
  const images = [
    "https://t7.baidu.com/it/u=727460147,2222092211&fm=193&f=GIF",
    "https://t7.baidu.com/it/u=1819248061,230866778&fm=193&f=GIF",
    "https://t7.baidu.com/it/u=12235476,3874255656&fm=193&f=GIF",
    "https://t7.baidu.com/it/u=2671101745,1413589787&fm=193&f=GIF",
  ];
  const list = [
    {
      img: "https://t7.baidu.com/it/u=1595072465,3644073269&fm=193&f=GIF",
      title: '五一假期7座小型客车免费通行全国收费公路',
      times: "2022/04/27",
      num: 1,
    },
    {
      img: "https://t7.baidu.com/it/u=1595072465,3644073269&fm=193&f=GIF",
      title: '五一假期7座小型客车免费通行全国收费公路',
      times: "2022/04/27",
      num: 2,
    },
    {
      img: "https://t7.baidu.com/it/u=1595072465,3644073269&fm=193&f=GIF",
      title: '五一假期7座小型客车免费通行全国收费公路',
      times: "2022/04/27",
      num: 3,
    },
  ]
  return (
    <div className='housd'>
      <div className='housdtops'>
        <div style={{ height: '80px' }}></div>
        <div className='housdtoplos'>
          <h1 style={{ fontSize: "25px" }}>火车票预订</h1>
          <p style={{ fontSize: "15px", marginTop: '10px' }}>便捷购票,服务您的每一次出行</p>
        </div>
      </div>
      <div className='housdbottom'>
        <div className='home_piao' >
          <ul>
            <li style={{ borderBottom: " solid 1px #ccc" }} >
              <div>
                <span onClick={() => { setVisible(true) }} >{value[0]}</span>
                <span onClick={() => {
                  setValue(valueB)
                  setValueB(value)
                }}
                >
                  <img src={img} />
                </span>
                <span onClick={() => {
                  setVisibleB(true)
                }}
                >{valueB[0]}</span>
              </div>
            </li>
            <li style={{ borderBottom: " solid 1px #ccc" }} >
              <div>
                <span onClick={() => {
                  setVisible5(true)
                }}
                >{time} 明天</span>
              </div>
            </li>
            <li className='housdcon3'><Button block color='primary' onClick={submit} >查询</Button></li>
            <li><span>{value[0] + '-' + valueB[0]}</span><span>清除历史</span></li>
          </ul>
        </div>
        {/* 日期选择器 */}
        <Popup
          visible={visible5}
          onMaskClick={() => {
            setVisible5(false)
          }}
          bodyStyle={{
            borderTopLeftRadius: '8px',
            borderTopRightRadius: '8px',
            minHeight: '40vh',
          }}
        >
          <Calendar
            selectionMode='single'
            defaultValue={new Date()}
            onChange={(val: any) => {
              setTime(`${new Date(val).getMonth() + 1}/${new Date(val).getDate()}`)
              setVisible5(false)
            }}
          />

        </Popup>
        {/* 获取第一个城市 */}
        <Cascader
          options={options}
          visible={visible}
          onClose={() => {
            setVisible(false)
          }}
          value={value}
          onConfirm={setValue}
        />
        {/* 获取第二个城市 */}
        <Cascader
          options={options}
          visible={visibleB}
          onClose={() => {
            setVisibleB(false)
          }}
          value={valueB}
          onConfirm={setValueB}
        />
      </div>
      <div className="disd">
        <Swiper>
          {images.map((image) => (
            <Swiper.Item key={image}>
              <Image lazyload src={image} />
            </Swiper.Item>
          ))}
        </Swiper>
      </div>
      <div className='lisds'>
        <Cell title='出行快讯' isLink value='更多' />
        <div>
          {
            list && list.map((item: any, index: number) => {
              return <div className='lisld' key={index}>
                <div className='li1'>
                  <div className='l1'>{item.num}</div>
                  <div className='l2'>
                    <p>{item.title}</p>
                    <a>澎湃新闻：{item.times}</a>
                  </div>
                </div>
                <div className='li2'>
                  <Image src={item.img}></Image>
                </div>
              </div>
            })
          }
        </div>
      </div>

    </div>
  )
}

export default My